import React from 'react'
import './App.css'
import '@alifd/next/dist/next.css';
import { Form, Input, Radio, Field, Button } from '@alifd/next';
import UISchema from './components/Uischema';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 14
  }
};


class App extends React.Component {
  filed: Field;
  uiSchemaRef: React.RefObject<UISchema>;
  constructor(...args) {
    super(...args);
    this.state = {
      visiable: false
    }

    this.field = new Field(this);

    this.validate = () => {
      this.field.validate(["sex"]);
    };
  }

  userExists(rule, value) {
    return new Promise((resolve, reject) => {
      if (!value) {
        resolve();
      } else {
        setTimeout(() => {
          if (value === "frank") {
            reject([new Error("Sorry, this username is already occupied.")]);
          } else {
            resolve();
          }
        }, 500);
      }
    });
  }

  checkPass(rule, value, callback) {
    const { validate } = this.field;
    if (value) {
      validate(["rePasswd"]);
    }
    callback();
  }

  checkPass2(rule, value, callback) {
    const { getValue } = this.field;
    if (value && value !== getValue("passwd")) {
      return callback("Inconsistent password input twice!");
    } else {
      return callback();
    }
  }
  submit = () => {
    this.field.validate((error: any, values: any) => {
      console.log(values)
    })
  }

  render() {
    const { getState, getValue, getError, init } = this.field;
    const validator = (rule: Rule, value: any, callback: (error?: string) => void) => {
      this.uiSchemaRef.current?.validate(callback);
    };
    const { visiable } = this.state

    return (
      <Form {...formItemLayout} field={this.field}>
        <FormItem
          label="Username:"
          hasFeedback
          required
          validator={this.userExists.bind(this)}
          help={
            getState("username") === "loading"
              ? "Checking ..."
              : getError("username")
          }
          name="username"
        >
          <Input placeholder="Input frank" />
          <p>Hello {getValue("username")}</p>
        </FormItem>

        <FormItem
          label="Password:"
          hasFeedback
          required
          requiredMessage="Please enter password"
          validator={this.checkPass.bind(this)}
          name="passwd"
        >
          <Input htmlType="password" />
        </FormItem>

        <FormItem
          label="Check your password:"
          hasFeedback
          required
          requiredMessage="Enter your password again"
          validator={this.checkPass2.bind(this)}
          name="rePasswd"
        >
          <Input
            htmlType="password"
            placeholder="Enter the same password twice"
          />
        </FormItem>

        <FormItem
          label="Gender:"
          hasFeedback
          required
          requiredMessage="Please select your gender"
          name="sex"
        >
          <RadioGroup>
            <Radio value="male">Male</Radio>
            <Radio value="female">Female</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem required={true}>
          <UISchema
            {...init(`properties`, {
              rules: [
                {
                  required: true
                },
              ],
            })}
            ref={this.uiSchemaRef}
          />
        </FormItem>


        <FormItem wrapperCol={{ offset: 6 }}>
          <Button onClick={this.validate}>Validate by Field</Button>
          <Form.Submit
            validate
            type="primary"
            onClick={this.submit}
            style={{ margin: "0 10px" }}
          >
            Submit
          </Form.Submit>
          <Form.Reset>Reset</Form.Reset>
        </FormItem>
      </Form>
    );
  }
}

export default App
